<template>
    <div class="train-control-panel">
        <el-tooltip content="点击按钮控制火车前进方向，按←/→键切换当前激活的火车">
            <el-button>帮助</el-button>
        </el-tooltip>

        <SingleTrainControl :train-alias="trainConfig.alias" :hot-key-enabled="index === activeIndex"
            :trainName="trainConfig.device_name" :ref="setItemRef" v-for="(trainConfig, index) in trains"
            :key="trainConfig.device_name" />
        <div style="height: 500px; width: 100%;">
            <LogPanel ref="logPanel"></LogPanel>
        </div>
    </div>

</template>
<style lang="css">
.train-control-panel {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
</style>
<script lang="ts" setup>
import { ref } from "vue";
import { onBeforeMount } from "vue"
import LogPanel, { LogItemType } from "./LogPanel.vue"
import SingleTrainControl from "./SingleTrainControl.vue";
import { registerCallback } from "./ws"
import { getDeviceConfigs } from "@/api";
import { DeviceFunctionalConfig } from "@/models";

type LogPanelType = InstanceType<typeof LogPanel>
type SingleTrainControlType = InstanceType<typeof SingleTrainControl>
const logPanel = ref<LogPanelType>()
const singleTrainControl: SingleTrainControlType[] = []
const setItemRef = (el: SingleTrainControlType) => {
    if (el) {
        singleTrainControl.push(el);
    }
};
// 被激活的索引
const activeIndex = ref(0)
const trains = ref<DeviceFunctionalConfig[]>([])
if (window.onkeyup == null) {
    window.onkeyup = (e: KeyboardEvent) => {
        console.log(e)
        const controlComponent = singleTrainControl[activeIndex.value]
        console.log(controlComponent, singleTrainControl)
        if (controlComponent == null) {
            console.error("control component is null")
            return
        }
        // 按空格键或者`键，可紧急停车
        if (e.key === " " || e.key == '`') {
            controlComponent.updateSpeedControl(0)
            return
        }
        if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
            if (e.key === "ArrowRight") {
                activeIndex.value = (activeIndex.value + 1) % trains.value.length
            } else {
                activeIndex.value = (activeIndex.value - 1 + trains.value.length) % trains.value.length
            }
        }
        // 按+或者-号进行方向的调节
        if (e.key === '=' || e.key === "-") {
            controlComponent.updateDirection(e.key)
            return
        }

        const regex = /^[0-9]{1}$/;
        // 使用test方法检查字符串是否符合正则表达式
        // 调节速度
        if (regex.test(e.key)) {
            controlComponent.updateSpeedLevel(e.key)
        }
    }
}

onBeforeMount(() => {
    getDeviceConfigs().then((configs) => {
        const locomotiveConfigs = configs.filter((cfg) => cfg.activated && cfg.role == "locomotive-control")
        trains.value = locomotiveConfigs
        singleTrainControl.splice(0, singleTrainControl.length)
    })
    registerCallback((data: LogItemType) => {
        if (logPanel.value == null) {
            console.error("logPanel is null")
            return
        }
        // console.log(data)
        if (data.type === "log") {
            logPanel.value?.addLogItem(data)
        }
    })
})
</script>